<template>
  <div class="right-btn">
    <a-button type="primary" size="large" @click="handlerClick">
      <SettingOutlined style="font-size: 20px" />
    </a-button>
  </div>

  <a-drawer
    :width="300"
    :placement="placement"
    :open="openDrawer"
    @close="handlerClose"
    :style="{ color: themeStore.isDark ? '#fff' : 'black' }"
  >
    <div class="container">
      <div>
        <h3>主题风格</h3>
        <div class="all-style">
          <a-tooltip title="简约风格">
            <div
              @click="chandlerChangeTheme('simple')"
              class="theme-style-item theme-style-item-light"
            >
              <span class="selection" v-if="themeStore.isSimple">
                <CheckOutlined />
              </span>
            </div>
          </a-tooltip>
          <a-tooltip title="商务风格">
            <div
              @click="chandlerChangeTheme('business')"
              class="theme-style-item theme-style-item-dark"
            >
              <span class="selection" v-if="themeStore.isBusiness">
                <CheckOutlined />
              </span>
            </div>
          </a-tooltip>
          <a-tooltip title="暗黑模式">
            <div
              @click="chandlerChangeTheme('dark')"
              class="theme-style-item theme-style-item-real-dark"
            >
              <span class="selection" v-if="themeStore.isDark">
                <CheckOutlined />
              </span>
            </div>
          </a-tooltip>
        </div>
      </div>
      <div>
        <h3>线性风格</h3>
        <div class="theme-color">
          <a-tooltip
            :title="item.title"
            v-for="(item, index) in themeBoreder"
            :key="index"
          >
            <div
              class="border-theme-item"
              @click="handlerBorderChange(item)"
              :style="{ background: item.color }"
            >
              <CheckOutlined
                v-if="themeStore.currentSkin.borderRadius === item.borderRadius"
              />
            </div>
          </a-tooltip>
        </div>
      </div>
      <div>
        <h3>主题色</h3>
        <div class="theme-color">
          <div
            class="theme-item"
            v-for="(item, index) in themeColor"
            :key="index"
            :style="{ backgroundColor: item.color }"
            @click="changeSkin(item)"
          >
            <CheckOutlined
              v-if="item.theme === themeStore.currentThemeColor.theme"
            />
          </div>
        </div>
      </div>
      <div>
        <h3>布局模式</h3>
        <div class="all-style">
          <a-tooltip title="侧边菜单布局">
            <div
              @click="handlerChangeLayout('siderMode')"
              class="theme-style-item theme-style-item-dark"
            >
              <span class="top-selection" v-if="themeStore.currentLayout === 'siderMode'">
                <CheckOutlined />
              </span>
            </div>
          </a-tooltip>
          <a-tooltip title="顶部菜单布局">
            <div
              @click="handlerChangeLayout('topMode')"
              class="theme-style-item theme-style-siderMode-item-dark"
            >
              <span class="top-selection" v-if="themeStore.currentLayout === 'topMode'">
                <CheckOutlined />
              </span>
            </div>
          </a-tooltip>
          <!-- <a-tooltip title="左侧混合布局">
            <div
              @click="chandlerChangeTheme('business')"
              class="theme-style-item theme-style-item-dark"
            >
              <span class="selection" v-if="themeStore.isBusiness">
                <CheckOutlined />
              </span>
            </div>
          </a-tooltip>
          <a-tooltip title="左侧混合布局">
            <div
              @click="chandlerChangeTheme('business')"
              class="theme-style-item theme-style-item-dark"
            >
              <span class="selection" v-if="themeStore.isBusiness">
                <CheckOutlined />
              </span>
            </div>
          </a-tooltip> -->
        </div>
      </div>
      <div>
        <h3>其他设置</h3>
        <div class="tab-setting">
          <h4>多页签</h4>
          <a-switch @change="handlerChangeTabs" v-model:checked="checked" />
        </div>
      </div>
    </div>
  </a-drawer>
</template>

<script setup>
import { ref, onMounted, h } from "vue";
import { useThemeStore } from "@/stores/models/theme";
import { themeColor, themeBoreder } from "@/theme";

const themeStore = useThemeStore();
const openDrawer = ref(false);
const checked = ref(themeStore.multiTabs);

onMounted(() => {});

const handlerClick = () => {
  openDrawer.value = true;
};

const handlerClose = () => {
  openDrawer.value = false;
};

const changeSkin = (item) => {
  themeStore.filterTheme(item.theme);
  themeStore.currentThemeColor = item;
};

//切换主题风格
const chandlerChangeTheme = (name) => {
  if (name === "simple") {
    themeStore.isSimple = true;
    themeStore.isDark = false;
    themeStore.isBusiness = false;
  } else if (name === "business") {
    themeStore.isBusiness = true;
    themeStore.isDark = false;
    themeStore.isSimple = false;
  } else if (name === "dark") {
    themeStore.isDark = true;
    themeStore.isBusiness = false;
    themeStore.isSimple = false;
  }
};

//线性风格设置
const handlerBorderChange = (item) => {
  themeStore.currentSkin.borderRadius = item.borderRadius;
};

//切换多页签
const handlerChangeTabs = () => {
  themeStore.multiTabs = !themeStore.multiTabs;
};

//切换布局
const handlerChangeLayout = (layoutMode) => {
  themeStore.currentLayout = layoutMode;
};
</script>



<style scoped lang='scss'>
.right-btn {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 4px 0 0 4px;

  :deep(.ant-btn) {
    padding: 0;
    border-radius: 4px 0 0 4px;
    height: 48px;
    width: 48px;
  }
}

.container > div {
  margin-bottom: 20px;
}

.all-style {
  display: flex;
  padding-top: 20px;
  height: 70px;
}

.theme-color {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 70px;

  .theme-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 8px;
    margin-right: 12px;
    font-weight: 700;
    text-align: center;
    border-radius: 2px;
    cursor: pointer;
  }

  .border-theme-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 36px;
    margin-top: 8px;
    margin-right: 20px;
    font-weight: 700;
    text-align: center;
    border-radius: 2px;
    cursor: pointer;
  }
}

.theme-style-item {
  position: relative;
  width: 44px;
  height: 36px;
  margin-right: 20px;
  overflow: hidden;
  background-color: #f0f2f5;
  border-radius: 4px;
  box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.tab-setting {
  height: 70px;
  display: flex;
  justify-content: space-between;
  padding: 20px 40px 0 0;
}

.theme-style-item:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 33%;
  height: 100%;
  background-color: #fff;
  content: "";
}

.theme-style-item:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25%;
  background-color: #fff;
  content: "";
}

.theme-style-item-light:before {
  background-color: #fff;
  content: "";
}

.theme-style-item-light:after {
  background-color: #fff;
}

.theme-style-item-dark:before {
  z-index: 1;
  background-color: black;
  content: "";
}

.theme-style-item-dark::after {
  background-color: #fff;
}

.theme-style-item-real-dark {
  background-color: #001529d9;
}

.theme-style-item-real-dark:before {
  z-index: 1;
  background-color: #001529a6;
  content: "";
}

.theme-style-item-real-dark::after {
  background-color: #001529d9;
}

.theme-style-siderMode-item-dark:before {
  background-color: #f0f2f5;
  content: "";
}

.theme-style-siderMode-item-dark::after {
  background-color: black;
}

.selection {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-weight: 700;
  font-size: 14px;
  pointer-events: none;
}

.top-selection{
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-weight: 700;
  font-size: 14px;
  pointer-events: none;
  color: black;
}
</style>